<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta name="Content-Type" content="text/html;charset=utf-8">
    <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
    <style type="text/css">
    * {margin: 0;padding:0; font-family: "microsoft yahei" sans-serif; font-size: 14px;overflow:hidden;}
    canvas {background:#333;width:1000px;height:376px;display:block;}
    .control-panel {padding:10px; width:300px;border:1px solid #ccc;border-radius: 5px; margin: 10px;}
    .left {float:right}
    .button {padding:5px 20px; border-radius: 3px;border:1px solid #ccc;background-color: #efefef;
        display: inline-block;text-decoration: none;color:#000;}
    .button:hover {cursor: pointer; background-color: #ffaa50; color:#fff;}
</style>
</head>
<body>
<div id="control-panel" class="left control-panel">
    <div style="margin-top: 10px;">
        <a class="button" href="../auto-layout/layout.html">自动布局（物理模型）</a>
        <a class="button" href="../coordinates/coordinates.html">平面坐标系（数学模型）</a>
    </div>
</div>
<canvas id="c" width="1000" height="376"> </canvas>
<script type="text/javascript" charset="utf-8" src="../../lib/cloth.js"></script>
</body>
</html>